<template>
	<div class="nav-bar">
		<div class="left">
			<img class="logo am-margin-right-sm" src="../assets/img/common/logo.png">
			<i @click="hide_side" :class="menu_icon"></i>
		</div>
		<el-menu mode="horizontal" background-color="#31404e" text-color="#fff" active-text-color="#ffd04b">
			<el-menu-item index="1">站点设置</el-menu-item>
			<el-menu-item index="2">预览网站</el-menu-item>
			<el-submenu index="3">
				<template slot="title">
					<el-avatar :src="profile.avatar"></el-avatar>
					<span class="username">{{profile.fullname}}</span>
				</template>
				<el-menu-item index="/admin/info">账户设置</el-menu-item>
				<el-menu-item>消息通知</el-menu-item>
				<el-menu-item @click="handleLogout">退出登录</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
import { mapState, mapMutations,mapGetters, mapActions } from 'vuex';
import reset_router from '@/router/reset_router';
export default {
	data() {
		return {

		}
	},
	created(){
		let user_id=sessionStorage.user_id;
		this.load_profile({user_id});
	},
	computed: {
		...mapGetters(['menu_icon']),
		...mapState('account',['profile'])
	},
	methods: {
		...mapMutations(['hide_side']),
		...mapActions('account',['load_profile']),
		// 退出登录
		handleLogout(){
			// 清空sessionStorage
			sessionStorage.removeItem('access_token');
			sessionStorage.removeItem('refresh_token');
			sessionStorage.removeItem('role_id');
			sessionStorage.removeItem('user_id');
			// 重置路由
			reset_router();
			this.$router.replace('/login');
		},
	}
}
</script>

<style lang="less" scoped>
.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left {
		display: flex;
		align-items: center;

		.logo {
			height: 50px;
		}
	}

	.username {
		margin-left: 10px;
	}

}
</style>
